<template>
  <div class="home">
    <div class="navheaders">
      <van-nav-bar @click-right="secedelogin">
        <template #title>
          <span>
            <img src="../../assets/img/logo.png" />
          </span>
        </template>
        <template #right>
          <a class="headerright" href="javascript;:">退出</a>
        </template>
      </van-nav-bar>
    </div>
    <div class="dataanalysis">

      <div style="width: 14.5rem;">
        <div class="data_left">
          <div class="datashuju">
            <!-- <p>{{resqut.totalUseSum}} <span class="jyqk-icon jyqk-iconwit"> -->
            <p>{{resqut.totalBrowseSum}} <span class="jyqk-icon jyqk-iconwit">
                <van-icon name="down" />
              </span></p>
            <!-- <p>累计使用人次</p> -->
            <p>累计浏览人数</p>
          </div>

        </div>

        <div class="data_right">
          <div class="datashuju">
            <p>{{resqut.nowUseSum}} <span class="jyqk-icon jyqk-iconwit">
                <van-icon name="down" />
              </span></p>
            <p>正在使用人次</p>
          </div>

        </div>
        <div class="data_left" style="background: #04BF75;">
          <div class="datashuju">
            <p>{{resqut.yestodayUseSum}} <span class="jyqk-icon jyqk-iconwit">
                <van-icon name="down" />
              </span></p>
            <p>昨日使用人次</p>
          </div>

        </div>

        <!-- <div class="data_right" style="background: #E86452;">
          <div class="datashuju">
            <p>{{resqut.preliminaryAgreement}}</p>
            <p>初步达成意向人数</p>
          </div>

        </div> -->
      </div>

    </div>
    <!-- <van-divider style="color:#323233;border-width: 0.02rem;" /> -->
    <div class="divider"></div>
    <div>
      <p class="jyqk-fc">就业情况分析</p>
      <div class="dataanalysis">
        <van-row>
          <van-col span="12">
            <div class="jyqk_left">
              <div class="jyqk-datashuju">
                <p class="jyqk-header">企业总数
                  <span class="jyqk-icon">
                    <van-icon name="down" />
                  </span>

                </p>
                <p class="jyqk-count">{{resqut.companyTotal}}家</p>
              </div>

            </div>
          </van-col>
          <van-col span="12">
            <div class="jyqk_left">
              <div class="jyqk-datashuju">
                <p class="jyqk-header">已入住激活数
                  <span class="jyqk-icon">
                    <van-icon name="down" />
                  </span>
                </p>
                <p class="jyqk-count">{{resqut.authCompanyCount}}家</p>
              </div>

            </div>
          </van-col>

        </van-row>
      </div>
      <div class="dataanalysis">
        <van-row>
          <van-col span="12">
            <div class="jyqk_left">
              <div class="jyqk-datashuju">
                <p class="jyqk-header">昨日激活数
                  <span class="jyqk-icon">
                    <van-icon name="down" />
                  </span>
                </p>
                <p class="jyqk-count">{{resqut.yestodayAuthCompanyCount}}家</p>
              </div>

            </div>
          </van-col>
          <van-col span="12">
            <div class="jyqk_left">
              <div class="jyqk-datashuju">
                <p class="jyqk-header">初步达成意向人数
                  <span class="jyqk-icon">
                    <van-icon name="down" />
                  </span>
                </p>
                <p class="jyqk-count">{{resqut.preliminaryAgreement}}家</p>
              </div>

            </div>
          </van-col>
          <!-- <van-col span="12">
            <div class="jyqk_left" style="position: relative;">
              <div class="jyqk-datashuju">

                <van-circle v-model="currentRate" :rate="parseInt(resqut.companyProportion*100)" :speed="100"
                  :text="text" style="width: 1.5rem;height:1.5rem" layer-color="#f2f3f5" />

                <span class="jyqk-jhzb">发布岗位总数</span>
              </div>

            </div>
          </van-col> -->

        </van-row>
      </div>
    </div>
    <div class="divider"></div>
    <div style="margin:0 0.4rem">
      <p class="gwgk-fc">岗位概况</p>
      <div v-for="(item,index) in arealist" :key="index+'area'">
        <van-divider />
        <p class="gwgk-header"><span class="gwgk-count">{{item.areaName}}</span><span
            class="gwgk-right gwgk-count">{{item.jobCount}}个</span>
        </p>
        <div class="gwgk-jdt">
          <van-progress :percentage="parseInt(item.jobProportion*100)" stroke-width="6" />
        </div>
      </div>
      <van-divider />
    </div>
    <div class="divider"></div>
    <div class="dataanalysis">

      <!-- <div class="data-gxpp">
        <img class="data-gxdximg" src="../../assets/img/gxdx.png" alt="">
        <div class="data-gx">
          <p class="data-gxt">高校毕业生短信推送次数</p>
          <p class="data-gxb">{{resqut.smsSendCount}}次</p>
        </div>
      </div> -->
      <div class="data-gxpp">
        <!-- <img class="data-gxdximg" src="../../assets/img/gxdx.png" alt=""> -->
        <div class="data-gx">
          <p class="data-gxt">招聘人数</p>
          <!-- <p class="data-gxb">{{resqut.smsSendCount}}</p> -->
          <p class="data-gxb">{{resqut.recruitNum}}</p>
        </div>
      </div>
      <div class="data-gxpp">
        <!-- <img class="data-gxppimg" src="../../assets/img/gxpp.png" alt=""> -->
        <div class="data-gx">
          <p class="data-gxt">平台人岗匹配次数</p>
          <!-- <p class="data-gxb">{{resqut.jobMatchingCount}}</p> -->
          <p class="data-gxb">{{resqut.platformMatchNum}}</p>
        </div>
      </div>
    </div>

    <div class="loading" v-if="loading">
      <van-loading size="24px">加载中...</van-loading>
    </div>

  </div>
</template>
<script>

import DATAANALYSIS from '@/api/dataanalysis'

export default {
  data () {
    return {
      searcharray: [],
      currentRate: 0,
      loading: false,
      arealist: [], // 地区存储列表
      send: '',
      matching: '',
      resqut: {
        companyTotal: '', // 企业
        companyProportion: '', // 激活占比
        yestodayAuthCompanyCount: '', // 昨日激活
        authCompanyCount: '', // 已入住激活
        nowUseSum: '', // 正在使用人次
        yestodayUseSum: '', // 昨日使用人次
        totalUseSum: '', // 累计使用人次
        preliminaryAgreement: '', // 初步达成意向
        smsSendCount: '', // 高效毕业生短信推送次数
        jobMatchingCount: '', // 高效毕业生岗位匹配次数
        totalBrowseSum: '',
        recruitNum: ''// 招聘人数
      }
      // statistics: {
      //   nowUseSum: '',//正在使用人次
      //   yestodayUseSum: '',//昨日使用人次
      //   totalUseSum: '',//累计使用人次
      //   preliminaryAgreement: ""//初步达成意向
      // }
    }
  },
  computed: {
    text () {
      return this.currentRate.toFixed(0) + '%'
    }
  },
  methods: {

    // // 岗位
    // areaCount () {
    //   let that = this

    //   DATAANALYSIS.areaCount().then(res => {
    //     console.log(res.data)
    //     if (res.data.success) {
    //       this.arealist = res.data.data
    //     } else if (res.data.code === 490) {
    //       this.secedelogin()
    //     }
    //   })
    // },

    // // 企业
    // surveyCount () {
    //   let that = this

    //   DATAANALYSIS.surveyCount().then(res => {
    //     console.log(res.data)
    //     if (res.data.success) {
    //       this.resqut = res.data.data
    //     } else if (res.data.code === 490) {
    //       this.secedelogin()
    //     }
    //   })
    // },
    // //统计
    // tongjiGet () {
    //   DATAANALYSIS.tongjiGet().then(res => {
    //     console.log(res.data)
    //     if (res.data.success) {
    //       this.statistics = res.data.data
    //     } else if (res.data.code === 490) {
    //       this.secedelogin()
    //     }
    //   })
    // },
    // //高效毕业短信发送次数
    // sendCount () {
    //   DATAANALYSIS.sendCount().then(res => {
    //     console.log(res.data)
    //     if (res.data.success) {
    //       this.send = res.data.data
    //     } else if (res.data.code === 490) {
    //       this.secedelogin()
    //     }
    //   })
    // },
    // //高效毕业岗位匹配数数
    // matchingCount () {
    //   DATAANALYSIS.matchingCount().then(res => {
    //     console.log(res.data)
    //     if (res.data.success) {
    //       this.matching = res.data.data
    //     } else if (res.data.code === 490) {
    //       this.secedelogin()
    //     }
    //   })
    // },

    indexGet () {
      this.loading = true
      DATAANALYSIS.indexGet().then(res => {
        this.loading = false
        console.log(res.data)
        if (res.data.success) {
          // this.matching = res.data.data
          this.arealist = res.data.data.jobAreaCount
          this.resqut = res.data.data
        } else if (res.data.code === 490) {
          this.secedelogin()
        }
      })
    },
    // 静态
    getStatic () {
      this.loading = true
      DATAANALYSIS.getStatic().then(res => {
        this.loading = false
        console.log(res.data)
        if (res.data.success) {
          // this.matching = res.data.data
          this.arealist = res.data.data.jobAreaCount
          this.resqut = res.data.data
        } else if (res.data.code === 490) {
          this.secedelogin()
        }
      })
    },
    secedelogin () {
      console.log(window.location.host, 'window.location.host')
      localStorage.clear()
      window.location.href = 'http://zs.zkqidi.com/zzrc'
    },

    init () {
      // this.areaCount()
      // this.surveyCount()

      // this.tongjiGet()
      // this.matchingCount()
      // this.sendCount()
      // this.indexGet()
      this.getStatic()
    }
  },
  created () {
    this.init()
  }
}
</script>
<style scoped>
.headerright {
  font-size: 28px;
  color: #333;
}
.data_left {
  width: 340px;
  height: 154px;
  overflow: hidden;
  background: #3ac0f5;
  box-shadow: 0px 3px 8px rgba(35, 35, 35, 0.16);
  opacity: 1;
  border-radius: 8px;
  text-align: left;
  display: inline-block;
}
.data_right {
  width: 340px;
  height: 154px;
  background: #f6bd2b;
  box-shadow: 0px 3px 8px rgba(35, 35, 35, 0.16);
  opacity: 1;
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
  display: inline-block;
}
.dataanalysis {
  margin-top: 30px;
  padding-left: 22px;
  overflow: scroll;
}
.datashuju {
  margin-top: 0.5rem;
  margin-left: 0.5rem;
  color: #fff;
}
.divider {
  height: 16px;
  background: #f6f6f8;
  border: 1px solid #e8e8e8;
  margin-top: 30px;
}
.jyqk-fc {
  margin: 36px 32px;
  text-align: left;
  height: 32px;
  font-size: 32px;
  font-weight: bold;
  line-height: 32px;
  color: #333333;
}
.jyqk_left {
  width: 334px;
  height: 175px;
  background: #ffffff;
  border: 1px solid #f0f0f0;
  box-shadow: 0px 3px 8px rgba(149, 149, 149, 0.16);
  opacity: 1;
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
}
.jyqk-datashuju {
  margin-top: 0.5rem;
  margin-left: 0.5rem;
}
.jyqk-count {
  height: 42px;
  font-size: 42px;
  font-weight: bold;
  line-height: 42px;
  color: #222222;
  margin-top: 0.3rem;
}
.jyqk-header {
  height: 28px;
  font-size: 28px;
  /* font-weight: bold; */
  line-height: 28px;
  color: #808080;
}
.jyqk-jhzb {
  position: absolute;
  top: 1rem;
  left: 2.1rem;
  font-weight: bold;
  font-size: 28px;
  color: #222;
}
.gwgk-header {
  text-align: left;
}
.gwgk-right {
  float: right;
  margin-top: 0.1rem;
}
.gwgk-count {
  height: 26px;
  font-size: 26px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 26px;
  color: #333333;
}
.gwgk-fc {
  margin: 36px 0px;
  text-align: left;
  height: 32px;
  font-size: 32px;
  font-weight: bold;
  line-height: 32px;
  color: #333333;
}
.gwgk-jdt {
  margin: 30px 0;
}
.data-gxpp {
  position: relative;
  width: 686px;
  height: 180px;
  background: #ffffff;
  border: 1px solid #f0f0f0;
  box-shadow: 0px 3px 8px rgba(35, 35, 35, 0.16);
  opacity: 1;
  border-radius: 8px;
  margin-bottom: 24px;
  text-align: left;
}
.data-gx {
  margin-left: 80px;
}
.data-gxppimg {
  position: absolute;
  top: 0.2rem;
  left: 0.8rem;
  width: 42px;
  height: 42px;
}
.data-gxdximg {
  position: absolute;
  top: 0.2rem;
  left: 0.8rem;
  width: 42px;
  height: 42px;
}
.data-gxt {
  margin: 35px 0 20px 0;

  height: 28px;
  font-size: 28px;
  /* font-weight: bold; */
  line-height: 28px;
  color: #808080;
}
.data-gxb {
  height: 42px;
  font-size: 42px;
  font-weight: bold;
  line-height: 42px;
  color: #222222;
}
.gwgk-jdt /deep/ .van-progress__pivot {
  display: none;
}

.loading /deep/ .van-loading {
  /* position: relative; */
  color: #c8c9cc;
  vertical-align: middle;
  position: fixed;
  top: 46%;
  left: 38%;
}
.jyqk-icon {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  /* transition: transform 0.5s; */
  display: inline-block;
  float: right;
  margin-right: 0.5rem;
  color: red;
}
.jyqk-iconwit {
  color: #fff;
}
</style>
